import RouterLink from "./router-link";
import RouterView from "./router-view";

let Vue;

class VueRouter {
  constructor(options) {
    this.options = options;

    // 1. 没有路由嵌套：创建响应式的 current，将来 current 变化时，会自动触发 router-view 的 h(component) 重新渲染页面
    // Vue.util.defineReactive(this, "current", "/");
    
    // 1. 有路由嵌套：创建响应式的 matched 数组
    this.current = window.location.hash.slice(1) || '/'
    Vue.util.defineReactive(this, "matched", []);
    this.match();

    // 2. 监听 url 变化，赋值给 current
    window.addEventListener("hashchange", this.onHashChange.bind(this));
    window.addEventListener("load", this.onHashChange.bind(this));

    // 3. 没有路由嵌套：创建一个路由映射表
    // this.routerMap = {};
    // this.options.routes.forEach((route) => {
    //   this.routerMap[route.path] = route;
    // });
  }

  onHashChange() {
    this.current = window.location.hash.slice(1);

    this.matched = []
    this.match()
  }

  // 3. 有路由嵌套：创建一个路由匹配数组
  match(routes) {
    routes = routes || this.options.routes;
    for (const route of routes) {
      if (route.path === "/" && this.current === "/") {
        this.matched.push(route);
        return;
      }
      if (route.path !== "/" && this.current.indexOf(route.path) !== -1) {
        this.matched.push(route);
        if (route.children) {
          this.match(route.children);
        }
      }
    }
  }
}

// VueRouter是一个插件，提供 install 静态方法
// 当 Vue.use(VueRouter)，Vue VueRouter 的 install 方法，并把 Vue 作为参数传给 _Vue
VueRouter.install = function (_Vue) {
  // 1. 使用 mixin，把 $router 挂载到 Vue 根实例上：之后每个 Vue 实例也能继承 $router
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      // 只有 Vue 的根实例上才有 router 选项
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router;
      }
    },
  });

  // 2. 注册两个全局组件
  Vue.component("router-link", RouterLink);
  Vue.component("router-view", RouterView);
};

export default VueRouter;
